<template>
    <div>
        <el-container class="el-conta">
            <el-header>
                <div class="fenleiHeader">
                        <el-dropdown max-height="300" size="large">
                            <el-button type="primary">
                              {{shangnames}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
                            </el-button>
                            <template #dropdown>
                              <el-dropdown-menu>
                                <el-dropdown-item v-for="item in  titlesData" @click="changeTitle(item)">{{item}}</el-dropdown-item>
                              </el-dropdown-menu>
                            </template>
                            </el-dropdown>
                            <el-input v-model="input" placeholder="输入关键词"  class="inputs"/>
                            <el-button type="primary" @click="getShangData()">搜素</el-button>
                </div>
            </el-header>

            <el-main>
                <el-table 
                :data="list" 
                max-height="400px" 
                v-loading="flag" 
                :border="true"
                >
                    <el-table-column prop="category" label="产品分类" />
                    <el-table-column prop="brand" label="产品品牌" />
                    <el-table-column prop="proname" label="商品名称" />
                    <el-table-column label="图片">
                        <template #default="scope">
                            <el-image style="width: 80px; height: 80px" :src="scope.row.img1" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="discount" label="商品折扣" />
                    <el-table-column prop="sales" label="商品销量" />
                    <el-table-column prop="stock" label="商品库存" />
                    <el-table-column label="商品价格" :sort-method="pricePai" sortable >
                        <template #header>
                            <el-tooltip :content="price" >
                                <el-button class="pai" @click="juage('price')">商品价格</el-button>
                            </el-tooltip>
                        </template>
                        <template #default="scope" >
                            <span style="color: red;">￥ {{scope.row.originprice}}</span> 
                        </template>
                    </el-table-column>
                    <el-table-column label="是否开启秒杀">
                        <template #default="scope">
                            <el-switch :model-value="scope.row.isseckill" size="small"  :active-value="1" :inactive-value="0"
                                @change="(val)=>changes(scope.row.proid,'isseckill',val)" />
                        </template>
                    </el-table-column>
                    <el-table-column label="是否开启推荐">
                        <template #default="scope">
                            <el-switch :model-value="scope.row.isrecommend" size="small"  :active-value="1" :inactive-value="0"
                                @change="(val)=>changes(scope.row.proid,'isrecommend',val)" />
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer>
                <div class="listBottom">
                    <el-pagination background layout="prev, pager, next" :total="total" @current-change="handle"/>
                    <img src="/6.png" alt="" class="bottomImg">
                </div>
            </el-footer>
            
        </el-container>
    </div>

</template>

<script>
    import {
        getPro,
        changekill,
        getShang,
        shixuan,
    } from '../api/product'
    import {Delete,Edit} from '@element-plus/icons-vue'
    export default {
        data() {
            return {
                list: [],
                total: 0,
                flag:false,
                price:'升序',
                shangnames:'全部',
                titlesData:[],
                input:'',
                Delete,
                Edit
            }
        },
        methods: {
            fetchs(c) {
                getPro(c, 10).then(res => {
                    this.flag = false;
                    this.list = res.data;
                    this.total = res.total
                })
            },
            pricePai(a,b){
                return a.originprice - b.originprice
            },
            handle(i){
                this.flag = true
                this.fetchs(i)
            },
            kill(id,type,flag){
                changekill(id,type,flag).then(res=>{
                        let index = this.list.findIndex(res=>res.proid == id);
                        this.list[index][type] = flag
                })
            },
            changes(id,type,val){
                this.kill(id,type,val)
            },
            juage(i){
                if(this[i] == '升序'){
                    this[i] = '降序'
                }else if(this[i] == '降序'){
                    this[i] = '取消排序'
                }else{
                    this[i] = '升序'
                }
            },
            sortChange(obj){
                console.log(obj);
            },
            changeTitle(i){
                this.shangnames = i
            },
            getShangData(){
                shixuan(this.shangnames,this.input).then(res=>{
                    this.list = res.data
                    console.log(res);
                    this.total = res.data.length
                })
            }
        },
        created() {
            this.fetchs(1);
            getShang().then(res=>{
                this.titlesData = res.data;
                this.titlesData.push('全部')
            })
        }
    }
</script>


<style scoped>
    .pai{
        border: none;
        width: 60px;
    }
    .listBottom{
        height:110px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    .bottomImg{
        width: 80px;
        height: 80px;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .fenleiHeader{
        display: flex;
        align-items: center;
        height: 50px;
        flex-direction: row;
    }
    .inputs{
        width: 200px;
        margin: 0 20px;
    }
</style>